<template>
  <div class="preview" :style="screenStyle">
    <component
      v-for="widget in widgets"
      :key="widget.id"
      :is="widget.entity"
      :widget="widget"
      :style="{
        position: 'absolute',
        width: widget.location.width + 'px',
        height: widget.location.height + 'px',
        top: widget.location.top + 'px',
        left: widget.location.left + 'px',
      }"
    ></component>
  </div>
</template>
<script>
import ChartBar from "./widget/ChartBar.vue";
import ChartLine from "./widget/ChartLine.vue";
import ChartPie from "./widget/ChartPie.vue";
import ChartScatter from "./widget/ChartScatter.vue";
import ChartPictorial from "./widget/ChartPictorial.vue";
import ChartRadar from "./widget/ChartRadar.vue";
import ChartFunnel from "./widget/ChartFunnel.vue";
import ChartGauge from "./widget/ChartGauge.vue";
import ChartMap from "./widget/ChartMap.vue";
import OthersText from "./widget/OthersText.vue";
import OthersMarquee from "./widget/OthersMarquee.vue";
import OthersImage from "./widget/OthersImage.vue";
import OthersTable from "./widget/OthersTable.vue";
import { getScreenStyle } from "./tools/DesignUtils";
import { obtainScreenInfo } from "@/api";
export default {
  data() {
    return {
      screen: {},
      widgets: [],
    };
  },
  computed: {
    screenStyle() {
      return getScreenStyle(this.screen);
    },
  },
  mounted() {
    const screenId = this.$route.params.id;
    obtainScreenInfo(screenId).then((response) => {
      if (response.data) {
        this.widgets = JSON.parse(response.data.widgets);
        delete response.data.widgets;
        delete response.data.enable;
        delete response.data.createTime;
        delete response.data.updateTime;
        this.screen = response.data;
      }
    });
  },
  components: {
    ChartBar,
    ChartLine,
    ChartPie,
    ChartScatter,
    ChartPictorial,
    ChartRadar,
    ChartFunnel,
    ChartGauge,
    ChartMap,
    OthersText,
    OthersMarquee,
    OthersImage,
    OthersTable,
  },
};
</script>
<style lang="stylus">
body {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: hsla(0, 0%, 100%, 0.2);
    border-radius: 5px;
    background-color: #606060;
  }
}
</style>